<template>

  <div class="account-box">
    <div class="box">
      <div>
        <h2>{{title}}</h2>
        <div class="form">
          <el-form :label-position="labelPosition"
                   label-width="80px"
                   :model="formLabelAlign">
            <el-form-item label="转入账号">
              <el-input v-model="formLabelAlign.cardNo"></el-input>
            </el-form-item>
            <el-form-item label="金额">
              <el-input v-model="formLabelAlign.balance"></el-input>
            </el-form-item>
            <el-button type="warning"
                       round
                       @click="onsbumit">转账</el-button>
          </el-form>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { TransferMoney } from '../../api/account'
export default {
  data () {
    return {
      cardNo: localStorage.getItem('cardNo'),
      title: '当前操作：转账。请输入转入账号和金额后点击 “转账” 按钮',
      labelPosition: 'right',
      formLabelAlign: {
        cardNo: '',
        balance: ''
      }
    };
  },
  methods: {
    async Money () {
      let result = await TransferMoney(this.cardNo, this.formLabelAlign.cardNo, this.formLabelAlign.balance)
      if (result.TransferMoney == 1 || result.TransferMoney == '1') {
        this.formLabelAlign.cardNo = ''
        this.formLabelAlign.balance = ''
        this.$message({
          message: '转账成功！',
          type: 'success',
          center: true,
          showClose: true
        });
      }
    },

    onsbumit () {
      if (this.formLabelAlign.cardNo.trim() == '' || this.formLabelAlign.balance.trim() == '') {
        this.$message({
          message: '请完善所有信息！！！',
          center: true,
          type: 'error',
          showClose: true
        });
        return false;
      }
      if (this.formLabelAlign.cardNo == this.cardNo) {
        this.$message({
          message: '别当傻屌！！！',
          center: true,
          type: 'error',
          showClose: true
        });
        return false;
      }
      this.Money();

    }
  }
}
</script>

<style lang="less">
.account-box {
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .box {
    height: 380px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.form {
  width: 340px;
  text-align: center;
  margin-left: 130px;
}
</style>